<script setup lang="ts" name="Verify">
/**
 * Verify
 * @description  Verify组件
 */
import { computed, markRaw, ref, toRefs, watchEffect } from "vue"
import type { Component } from "vue"
import VerifySlide from "./Verify/VerifySlide.vue"
import VerifyPoints from "./Verify/VerifyPoints.vue"
import { useI18n } from "./utils/i18n"
import "./style/verify.css"

// 解决组件动态引用问题
const VerifySlideComponent = markRaw(VerifySlide || VerifySlide)
const VerifyPointsComponent = markRaw(VerifyPoints || VerifyPoints)

const props = defineProps({
  captchaType: {
    type: String,
    required: true,
  },
  figure: {
    type: Number,
  },
  arith: {
    type: Number,
  },
  mode: {
    type: String,
    default: "pop",
  },
  vSpace: {
    type: Number,
  },
  explain: {
    type: String,
  },
  imgSize: {
    type: Object,
    default() {
      return {
        width: "400px",
        height: "200px",
      }
    },
  },
  blockSize: {
    type: Object,
  },
  barSize: {
    type: Object,
  },
})

const { t } = useI18n()
const { captchaType, mode } = toRefs(props)
const clickShow = ref(false)
const verifyType = ref<string>("")
const componentType = ref<Component | null>(null)

const instance = ref<any>({})

const showBox = computed(() => {
  if (mode.value === "pop") return clickShow.value
  else return true
})

/**
 * refresh
 * @description 刷新
 */
const refresh = () => {
  if (instance.value && instance.value.refresh) instance.value.refresh()
}

const closeBox = () => {
  clickShow.value = false
  refresh()
}

const show = () => {
  if (mode.value === "pop") clickShow.value = true
}

watchEffect(() => {
  switch (captchaType.value) {
    case "blockPuzzle":
      verifyType.value = "2"
      componentType.value = VerifySlideComponent
      break
    case "clickWord":
      verifyType.value = ""
      componentType.value = VerifyPointsComponent
      break
  }
})

// 向父组件暴露方法
defineExpose({
  show,
  refresh,
  closeBox,
})

// 声明发射的事件
defineEmits(["success", "error", "ready"])
</script>

<template>
  <div v-show="showBox" :class="mode === 'pop' ? 'mask' : ''">
    <div :class="mode === 'pop' ? 'verifybox' : ''" :style="{ 'max-width': `${parseInt(imgSize.width) + 20}px` }">
      <div v-if="mode === 'pop'" class="verifybox-top">
        {{ t("component.captcha.verification") }}
        <span class="verifybox-close" @click="closeBox">
          <i class="iconfont icon-close" />
        </span>
      </div>
      <div class="verifybox-bottom" :style="{ padding: mode === 'pop' ? '10px' : '0' }">
        <!-- 验证码容器 -->
        <component
          :is="componentType"
          v-if="componentType"
          ref="instance"
          :captcha-type="captchaType"
          :type="verifyType"
          :figure="figure"
          :arith="arith"
          :mode="mode"
          :v-space="vSpace"
          :explain="explain"
          :img-size="imgSize"
          :block-size="blockSize"
          :bar-size="barSize"
        />
      </div>
    </div>
  </div>
</template>

